extends ../_layout

block active
  - sidebar_active = 'projects.html'

block content
    .pull-right
        button(type="button").btn.btn-default.btn-sm Create project
    h3 Projects

    .row
        .col-lg-4.col-md-6
            .panel.b
                .panel-heading
                    .pull-right
                        .label.label-info started
                    h4.m0 Project #1
                    small.text-muted Sed amet lectus id.
                .panel-body
                    .table-grid.table-grid-align-middle
                        .col
                            .visible-xs.visible-sm.text-bold.text-muted.text-right 22%
                            div(data-toggle="tooltip", data-title="Health"): .progress.progress-xs.m0: .progress-bar.progress-bar-warning(style="width:22%") 22%
                        .col.wd-xxs.text-right.hidden-xs.hidden-sm: .text-bold.text-muted 22%
                table.table: tbody
                    tr
                        td: strong Start date
                        td 01/01/2016
                    tr
                        td: strong  Members
                        td
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/02.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/04.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/05.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/06.jpg", alt="project member")
                            a.inline(href="#"): strong +5
                    tr
                        td: strong  Leader
                        td
                            a(href="", data-toggle="tooltip", data-title="Team leader"): img.img-circle.thumb24(src="img/user/03.jpg", alt="project member")
                    tr
                        td: strong Metrics
                        td
                            .sparkline.inline.mr(data-sparkline="", values="20,80", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#23b7e5"]')
                            .sparkline.inline.mr(data-sparkline="", values="60,40", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#27c24c"]')
                            .sparkline.inline(data-sparkline="", values="90,10", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#ff902b"]')
                .panel-footer.text-center
                    button(type="button").btn.btn-default Manage project
        .col-lg-4.col-md-6
            .panel.b
                .panel-heading
                    .pull-right
                        .label.label-info started
                    h4.m0 Project #2
                    small.text-muted Sed amet lectus id.
                .panel-body
                    .table-grid.table-grid-align-middle
                        .col
                            .visible-xs.visible-sm.text-bold.text-muted.text-right 80%
                            div(data-toggle="tooltip", data-title="Health"): .progress.progress-xs.m0: .progress-bar.progress-bar-success(style="width:80%") 80%
                        .col.wd-xxs.text-right.hidden-xs.hidden-sm: .text-bold.text-muted 80%
                table.table: tbody
                    tr
                        td: strong Start date
                        td 02/01/2016
                    tr
                        td: strong  Members
                        td
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/02.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/04.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/05.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/06.jpg", alt="project member")
                            a.inline(href="#"): strong +6
                    tr
                        td: strong  Leader
                        td
                            a(href="", data-toggle="tooltip", data-title="Team leader"): img.img-circle.thumb24(src="img/user/03.jpg", alt="project member")
                    tr
                        td: strong Metrics
                        td
                            .sparkline.inline.mr(data-sparkline="", values="20,80", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#23b7e5"]')
                            .sparkline.inline.mr(data-sparkline="", values="60,40", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#27c24c"]')
                            .sparkline.inline(data-sparkline="", values="90,10", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#ff902b"]')
                .panel-footer.text-center
                    button(type="button").btn.btn-default Manage project
        .col-lg-4.col-md-6
            .panel.b
                .panel-heading
                    .pull-right
                        .label.label-info started
                    h4.m0 Project #3
                    small.text-muted Sed amet lectus id.
                .panel-body
                    .table-grid.table-grid-align-middle
                        .col
                            .visible-xs.visible-sm.text-bold.text-muted.text-right 50%
                            div(data-toggle="tooltip", data-title="Health"): .progress.progress-xs.m0: .progress-bar.progress-bar-info(style="width:50%") 50%
                        .col.wd-xxs.text-right.hidden-xs.hidden-sm: .text-bold.text-muted 50%
                table.table: tbody
                    tr
                        td: strong Start date
                        td 03/01/2016
                    tr
                        td: strong  Members
                        td
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/02.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/04.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/05.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/06.jpg", alt="project member")
                            a.inline(href="#"): strong +7
                    tr
                        td: strong  Leader
                        td
                            a(href="", data-toggle="tooltip", data-title="Team leader"): img.img-circle.thumb24(src="img/user/03.jpg", alt="project member")
                    tr
                        td: strong Metrics
                        td
                            .sparkline.inline.mr(data-sparkline="", values="20,80", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#23b7e5"]')
                            .sparkline.inline.mr(data-sparkline="", values="60,40", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#27c24c"]')
                            .sparkline.inline(data-sparkline="", values="90,10", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#ff902b"]')
                .panel-footer.text-center
                    button(type="button").btn.btn-default Manage project

        .col-lg-4.col-md-6
            .panel.b
                .panel-heading
                    .pull-right
                        .label.label-warning paused
                    h4.m0 Project #4
                    small.text-muted Sed amet lectus id.
                .panel-body
                    .table-grid.table-grid-align-middle
                        .col
                            .visible-xs.visible-sm.text-bold.text-muted.text-right 22%
                            div(data-toggle="tooltip", data-title="Health"): .progress.progress-xs.m0: .progress-bar.progress-bar-warning(style="width:22%") 22%
                        .col.wd-xxs.text-right.hidden-xs.hidden-sm: .text-bold.text-muted 22%
                table.table: tbody
                    tr
                        td: strong Start date
                        td 04/01/2016
                    tr
                        td: strong  Members
                        td
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/02.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/04.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/05.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/06.jpg", alt="project member")
                            a.inline(href="#"): strong +8
                    tr
                        td: strong  Leader
                        td
                            a(href="", data-toggle="tooltip", data-title="Team leader"): img.img-circle.thumb24(src="img/user/03.jpg", alt="project member")
                    tr
                        td: strong Metrics
                        td
                            .sparkline.inline.mr(data-sparkline="", values="20,80", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#23b7e5"]')
                            .sparkline.inline.mr(data-sparkline="", values="60,40", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#27c24c"]')
                            .sparkline.inline(data-sparkline="", values="90,10", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#ff902b"]')
                .panel-footer.text-center
                    button(type="button").btn.btn-default Manage project
        .col-lg-4.col-md-6
            .panel.b
                .panel-heading
                    .pull-right
                        .label.bg-gray pending
                    h4.m0 Project #5
                    small.text-muted Sed amet lectus id.
                .panel-body
                    p.m0.text-center This project does not register progress.
                table.table: tbody
                    tr
                        td: strong Start date
                        td 05/01/2016
                    tr
                        td: strong  Members
                        td
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/02.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/04.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/05.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/06.jpg", alt="project member")
                            a.inline(href="#"): strong +9
                    tr
                        td: strong  Leader
                        td
                            a(href="", data-toggle="tooltip", data-title="Team leader"): img.img-circle.thumb24(src="img/user/03.jpg", alt="project member")
                    tr
                        td: strong Metrics
                        td
                            .sparkline.inline.mr(data-sparkline="", values="20,80", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#23b7e5"]')
                            .sparkline.inline.mr(data-sparkline="", values="60,40", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#27c24c"]')
                            .sparkline.inline(data-sparkline="", values="90,10", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#ff902b"]')
                .panel-footer.text-center
                    button(type="button").btn.btn-default Manage project
        .col-lg-4.col-md-6
            .panel.b
                .panel-heading
                    .pull-right
                        .label.label-success completed
                    h4.m0 Project #6
                    small.text-muted Sed amet lectus id.
                .panel-body
                    .table-grid.table-grid-align-middle
                        .col
                            .visible-xs.visible-sm.text-bold.text-muted.text-right 100%
                            div(data-toggle="tooltip", data-title="Health"): .progress.progress-xs.m0: .progress-bar.progress-bar-success(style="width:100%") 100%
                        .col.wd-xxs.text-right.hidden-xs.hidden-sm: .text-bold.text-muted 100%
                table.table: tbody
                    tr
                        td: strong Start date
                        td 06/01/2016
                    tr
                        td: strong  Members
                        td
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/02.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/04.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/05.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/06.jpg", alt="project member")
                            a.inline(href="#"): strong +10
                    tr
                        td: strong  Leader
                        td
                            a(href="", data-toggle="tooltip", data-title="Team leader"): img.img-circle.thumb24(src="img/user/03.jpg", alt="project member")
                    tr
                        td: strong Metrics
                        td
                            .sparkline.inline.mr(data-sparkline="", values="20,80", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#23b7e5"]')
                            .sparkline.inline.mr(data-sparkline="", values="60,40", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#27c24c"]')
                            .sparkline.inline(data-sparkline="", values="90,10", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#ff902b"]')
                .panel-footer.text-center
                    button(type="button").btn.btn-default Manage project

        .col-lg-4.col-md-6
            .panel.b
                .panel-heading
                    .pull-right
                        .label.bg-gray-dark canceled
                    h4.m0 Project #7
                    small.text-muted Sed amet lectus id.
                .panel-body
                    .table-grid.table-grid-align-middle
                        .col
                            .visible-xs.visible-sm.text-bold.text-muted.text-right 30%
                            div(data-toggle="tooltip", data-title="Health"): .progress.progress-xs.m0: .progress-bar.progress-bar-warning(style="width:30%") 30%
                        .col.wd-xxs.text-right.hidden-xs.hidden-sm: .text-bold.text-muted 30%
                table.table: tbody
                    tr
                        td: strong Start date
                        td 04/01/2016
                    tr
                        td: strong  Members
                        td
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/02.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/04.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/05.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/06.jpg", alt="project member")
                            a.inline(href="#"): strong +8
                    tr
                        td: strong  Leader
                        td
                            a(href="", data-toggle="tooltip", data-title="Team leader"): img.img-circle.thumb24(src="img/user/03.jpg", alt="project member")
                    tr
                        td: strong Metrics
                        td
                            .sparkline.inline.mr(data-sparkline="", values="20,80", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#23b7e5"]')
                            .sparkline.inline.mr(data-sparkline="", values="60,40", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#27c24c"]')
                            .sparkline.inline(data-sparkline="", values="90,10", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#ff902b"]')
                .panel-footer.text-center
                    button(type="button").btn.btn-default Manage project
        .col-lg-4.col-md-6
            .panel.b
                .panel-heading
                    .pull-right
                        .label.label-info started
                    h4.m0 Project #8
                    small.text-muted Sed amet lectus id.
                .panel-body
                    .table-grid.table-grid-align-middle
                        .col
                            .visible-xs.visible-sm.text-bold.text-muted.text-right 10%
                            div(data-toggle="tooltip", data-title="Health"): .progress.progress-xs.m0: .progress-bar.progress-bar-danger(style="width:10%") 10%
                        .col.wd-xxs.text-right.hidden-xs.hidden-sm: .text-bold.text-muted 10%
                table.table: tbody
                    tr
                        td: strong Start date
                        td 05/01/2016
                    tr
                        td: strong  Members
                        td
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/02.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/04.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/05.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/06.jpg", alt="project member")
                            a.inline(href="#"): strong +9
                    tr
                        td: strong  Leader
                        td
                            a(href="", data-toggle="tooltip", data-title="Team leader"): img.img-circle.thumb24(src="img/user/03.jpg", alt="project member")
                    tr
                        td: strong Metrics
                        td
                            .sparkline.inline.mr(data-sparkline="", values="20,80", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#23b7e5"]')
                            .sparkline.inline.mr(data-sparkline="", values="60,40", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#27c24c"]')
                            .sparkline.inline(data-sparkline="", values="90,10", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#ff902b"]')
                .panel-footer.text-center
                    button(type="button").btn.btn-default Manage project
        .col-lg-4.col-md-6
            .panel.b
                .panel-heading
                    .pull-right
                        .label.label-success completed
                    h4.m0 Project #9
                    small.text-muted Sed amet lectus id.
                .panel-body
                    .table-grid.table-grid-align-middle
                        .col
                            .visible-xs.visible-sm.text-bold.text-muted.text-right 100%
                            div(data-toggle="tooltip", data-title="Health"): .progress.progress-xs.m0: .progress-bar.progress-bar-success(style="width:100%") 100%
                        .col.wd-xxs.text-right.hidden-xs.hidden-sm: .text-bold.text-muted 100%
                table.table: tbody
                    tr
                        td: strong Start date
                        td 06/01/2016
                    tr
                        td: strong  Members
                        td
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/02.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/04.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/05.jpg", alt="project member")
                            a.inline(href="#"): img.img-circle.thumb24(src="img/user/06.jpg", alt="project member")
                            a.inline(href="#"): strong +10
                    tr
                        td: strong  Leader
                        td
                            a(href="", data-toggle="tooltip", data-title="Team leader"): img.img-circle.thumb24(src="img/user/03.jpg", alt="project member")
                    tr
                        td: strong Metrics
                        td
                            .sparkline.inline.mr(data-sparkline="", values="20,80", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#23b7e5"]')
                            .sparkline.inline.mr(data-sparkline="", values="60,40", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#27c24c"]')
                            .sparkline.inline(data-sparkline="", values="90,10", data-type='pie', data-height="24", data-slice-colors='["#edf1f2", "#ff902b"]')
                .panel-footer.text-center
                    button(type="button").btn.btn-default Manage project
block vendor_js
  // SPARKLINE
  script(src='../vendor/sparkline/index.js')
